<template>
  <div>
    <el-form ref="vForm" label-position="left" label-width="80px" size="medium" @submit.native.prevent>
      <div>
        <div class="record-title">9条目患者健康问卷(PHQ—9)</div>
      </div>
      <div class="instructions center">
        <p style="text-indent: 2em;">根据下面9个问题回答，在符合您的选项数字上面“√”，将答案的相应评分进行总和，判断您是否存在抑郁状态，如总分达5分或5分以上，应警惕抑郁状态：
        </p>
      </div>

      <div class="table-container">
        <table class="table-layout center">
          <tbody>
            <tr>
              <td class="table-cell" rowspan="2">序号
              </td>
              <td class="table-cell" rowspan="2">在过去的两周内，以下情况
                烦扰您有多频繁？
              </td>
              <td class="table-cell" colspan="4">评分
              </td>
            </tr>
            <tr>
              <td class="table-cell">完全不会
              </td>
              <td class="table-cell">好几天
              </td>
              <td class="table-cell">一半以上的天数
              </td>
              <td class="table-cell">几乎每天
              </td>
            </tr>
            <tr v-for="(item,index) in list" :key="index">
              <td class="table-cell">{{index + 1}}
              </td>
              <td class="table-cell">{{item.label}}
              </td>
              <td class="table-cell"><el-radio v-model="form[`question${index + 1}Score`]" label="0">0</el-radio>
              </td>
              <td class="table-cell"><el-radio v-model="form[`question${index + 1}Score`]" label="1">1</el-radio>
              </td>
              <td class="table-cell"><el-radio v-model="form[`question${index + 1}Score`]" label="2">2</el-radio>
              </td>
              <td class="table-cell"><el-radio v-model="form[`question${index + 1}Score`]" label="3">3</el-radio>
              </td>
            </tr>
            <tr>
              <td class="table-cell" colspan="6">
                <span>总分（最高分=27，最低分=0）：</span>
                <span class="total_points">{{getTotalPoints}}</span>
                <span>﹦﹝</span>
                <span class="border-bottom-whole" v-for="(val,index) in setFormList()" :key="index">
                  <span class="val">{{Number(val)}}</span>
                  <span class="add" v-if="(index + 1) != setFormList().length">+</span>
                </span>
                <span>﹞</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="instructions center">
        <p style="text-indent: 2em;">评分标准：
        </p>
      </div>

      <div class="table-container">
        <table class="table-layout center" style="margin-bottom: 30px;">
          <tbody>
            <tr>
              <td class="table-cell" style="width: 30%;">分值
              </td>
              <td class="table-cell">没有抑郁
              </td>
              <td class="table-cell">有抑郁症状
              </td>
              <td class="table-cell">明显抑郁症状
              </td>
              <td class="table-cell">重度抑郁
              </td>
            </tr>
            <tr>
              <td class="table-cell" rowspan="2">标准分
                （请在相应分值处打“√”）
              </td>
              <td class="table-cell">0-4分
              </td>
              <td class="table-cell">5-9分
              </td>
              <td class="table-cell">10-14分
              </td>
              <td class="table-cell">15-27分
              </td>
            </tr>
            <tr>
              <td class="table-cell">
                <el-radio v-model="standardScore" label="0"><span></span></el-radio>
              </td>
              <td class="table-cell">
                <el-radio v-model="standardScore" label="1"><span></span></el-radio>
              </td>
              <td class="table-cell">
                <el-radio v-model="standardScore" label="2"><span></span></el-radio>
              </td>
              <td class="table-cell">
                <el-radio v-model="standardScore" label="3"><span></span></el-radio>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      standardScore: null,
      form: {
        question1Score: null,
        question2Score: null,
        question3Score: null,
        question4Score: null,
        question5Score: null,
        question6Score: null,
        question7Score: null,
        question8Score: null,
        question9Score: null,
      },
      list: []
    }
  },
  created() {
    this.setList();
  },
  computed: {
    getTotalPoints() {
      return Object.values(this.form).reduce((a, b) => Number(a) + Number(b), 0);
    },
  },
  methods: {
    /**
     * 将表单转为数组遍历
     */
    setFormList() {
      return Object.values(this.form)
    },
    /**
     * 设置列表
     */
    setList() {
      this.list = [
        { label: "做事时提不起劲或没有兴趣" },
        { label: "感到心情低落，沮丧或绝望" },
        { label: "入睡困难，睡不安稳或睡眠过多" },
        { label: "感觉疲倦或没有活力" },
        { label: "食欲不振或吃太多" },
        { label: "觉得自己很糟或觉得自己很失败，或让自己或家人失望" },
        { label: "对事物专注有困难，例如阅读报纸或看电视时" },
        { label: "动作或说话速度缓慢到别人已经察觉？或正好相反-烦躁或坐立不安、动来动去的情况更胜于平常" },
        { label: "有不如死掉或用某种方式伤害自己的念头" },
      ]
    },
    /**
     * 对数据进行整合，返回给调用者
     */
    getForm() {
      let { standardScore = null, form = {} } = this;
      let total = this.getTotalPoints;
      let data = { total, standardScore, ...form };
      return data;
    }
  },
}
</script>
<style lang="scss" scoped>
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.instructions {
  font-size: 18px;
  line-height: 1.6;
  padding: 10px;
  border-radius: 5px;
}

.instructions p {
  margin-bottom: 10px;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

div.table-container {
  table.table-layout {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td.table-cell {
      display: table-cell;
      height: 38px;
      border: 1px solid #333;
      font-size: 16px;
      overflow-wrap: break-word;
      .border-bottom-whole {
        .val {
          border-bottom: 2px solid #999;
          padding: 0 8px;
        }
        .add {
          padding: 0 8px;
        }
      }
      .total_points {
        border-bottom: 2px solid #999;
        padding: 0 15px;
      }
    }
  }
}

.table-layout tr:not(:last-child) td:nth-child(1) {
  width: 5%;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 16px;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.static-content-item-head {
  min-height: 20px;
  font-size: 15px;
  display: flex;
  // justify-content: space-around;
  justify-content: space-between;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

::v-deep .el-divider--horizontal {
  margin: 0;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

::v-deep .el-form-item__label {
  font-size: 16px;
}

.el-form-item {
  margin-bottom: 0px;
}

.footer {
  font-size: 20px;

  input {
    text-align: left;
    width: 40%;
  }
}

//宽度
.w-50 {
  width: 50px;
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

// 去除input样式
input {
  border: none;
  text-align: center;
  width: 100%;
}

input[type="text"]:focus {
  outline: none;
}

input::placeholder {
  color: #ccc;
  /* 设置 placeholder 颜色为灰色 */
}

.textareaStyle {
  width: 100%;
  height: 93%;
  margin-top: 10px;
}

textarea {
  border: none;
  text-align: center;
  width: 100%;
}

textarea[type="text"]:focus {
  outline: none;
}

textarea::placeholder {
  color: #ccc;
  /* 设置 placeholder 颜色为灰色 */
}
</style>
